<script setup>
import { ref } from "vue";
import "element-plus/es/components/message/style/css";
import { ElMessage } from "element-plus";
import { userUserStore } from "@/stores/user";
const userStore = userUserStore();
import { useRouter } from "vue-router";
const router = useRouter()
const uploadOrderUrl = ref(
  "http://192.168.100.91:7001/api/admin/procure/pcProcure/uploadProcureExcel"
);
const uploadProcureReturnUrl = ref(
  "http://192.168.100.91:7001/api/admin/procure/pcProcureReturn/uploadProcureReturnExcel"
)
const loading = ref(false)
const headobj = ref({
  fgtoken: userStore.userInfo.token,
});
//当超出限制时，执行的钩子函数
const handleExceed = (files, fileList) => {
  if (state.fileList.length >= 1) {
    ElMessage.error("只能上传一个图片");
    return;
  }
};
//上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。
const beforeUpload = (file) => {
//文件限制
//   const type = ["data/xlsx"];
//   if (type.indexOf(file.type) === -1) {
//     ElMessage.error("上传的文件必须是xlsx!");
//     return false;
//   } else
  if (file.size / 1024 / 1024 > 10) {
    ElMessage.error("文件大小不能超过10MB!");
    return false;
  }
  loading.value = true
  return true;
};
//覆盖默认的 Xhr 行为，允许自行实现上传文件的请求
const uploadAction = (option) => {
  let param = new FormData();
  param.append("file", option.file);
  uploadImage(param).then((res) => {
    if (res && res.code === 0) {
      state.fileName = res.data.fileName;
      state.bannerUrl = res.data.imageUrl;
      ElMessage.success("文件上传成功！");
    } else {
      if (res && res.msg) {
        ElMessage.error(res.msg);
      } else {
        ElMessage.error("文件上传失败！");
      }
    }
  });
};
const errorUpload = (response) => {
  loading.value = false
  console.log(response)
  if(response.status === 500){
    ElMessage({
        message: "传入失败请联系管理员",
        type: "error",
      });
  }else {
    ElMessage({
        message: "登入到期,请重新登入",
        type: "error",
      });
    userStore.clearUserInfo()
		router.push('/login')
  }
}
const successUpload = (response) => {
  loading.value = false
  console.log(response)
  // if(response.code == 401){
  //   console.log('40111111111')
  //   ElMessage({
  //       message: response.errorMessage,
  //       type: "error",
  //     });
  // }else
  if (response.code!=200){
    ElMessage({
        message: response.errorMessage,
        type: "error",
      });
  }else if(response.code ==200){
    ElMessage({
        message: response.data,
        type: "success",
      });
  }
}
</script>


<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>采购控制</el-breadcrumb-item>
      <el-breadcrumb-item>提交数据</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <el-card  v-loading="loading">
    <!-- <el-upload
      v-model:file-list="fileList"
      class="upload-demo"
      :action="uploadOrderUrl"
      :headers="headobj"
      :limit="3"
      :on-exceed="handleExceed"
    >
      <el-button type="primary">上传销售订单</el-button>
      <template #tip>
        <div class="el-upload__tip">请上传今日销售订单表</div>
      </template>
    </el-upload> -->
    <!-- 覆盖默认的 Xhr 行为，允许自行实现上传文件的请求 -->
    <!-- :http-request="uploadAction" -->
    <!-- 当超出限制时，执行的钩子函数	 -->
    <!-- :on-exceed="handleExceed" -->
    <!-- :limit="1" -->
    <el-upload
      ref="uploadFile"
      :action="uploadOrderUrl"
      :headers="headobj"
      :show-file-list="false"
      :auto-upload="true"
      :before-upload="beforeUpload"
      :on-success="successUpload"
      :on-error="errorUpload"
      style="width: 100%"
      class="left-view"
    >
      <!-- <img v-if="bannerUrl" :src="bannerUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
      <el-button type="primary">上传采购订单</el-button>
      <template #tip>
        <div class="el-upload__tip">请上传今日采购订单表</div>
      </template>
    </el-upload>

    <el-upload
      ref="uploadFile"
      :action="uploadProcureReturnUrl"
      :headers="headobj"
      :show-file-list="false"
      :auto-upload="true"
      :before-upload="beforeUpload"
      :on-success="successUpload"
      :on-error="errorUpload"
      style="width: 100%"
      class="left-view"
    >
      <!-- <img v-if="bannerUrl" :src="bannerUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
      <el-button type="primary">上传采购退货订单</el-button>
      <template #tip>
        <div class="el-upload__tip">请上传今日采购退货订单表</div>
      </template>
    </el-upload>


  </el-card>
</template>

<style scoped lang='less'></style>
